<%@page pageEncoding="UTF-8"%>
<%@ include file="include/header.jsp"%>
<style>
	.row-expand-cover .el-table__expand-icon{visibility:hidden;}
</style>
<body>
	<div id="app" v-cloak style="position: relative;">
		<el-collapse style="margin: 0px 5px 6px 5px;">
			<el-collapse-item title="&#12288;条件查询">
				<el-form :inline="true" :model="filters" label-position="top" size="small">
					<div style="margin-left: 16px;position: relative;">
		                <el-form-item label="操作人">
		                    <el-input v-model="filters.operatorName" placeholder="操作人" clearable></el-input>
		                </el-form-item>
		                <el-form-item label="请求地址">
		                    <el-input v-model="filters.requestUri" placeholder="请求地址" clearable></el-input>
		                </el-form-item>
		                <el-form-item label="请求时间">
		                    <el-date-picker
		                            v-model="timeInterval"
		                            type="daterange"
		                            align="right"
		                            unlink-panels
		                            range-separator="至"
		                            start-placeholder="开始日期"
		                            end-placeholder="结束日期"
		                            :picker-options="pickerTimeOptions"
		                            value-format="yyyy-MM-dd"
		                            @change="searchTimeChange"
		                    >
		                    </el-date-picker>
		                </el-form-item>
						<el-form-item label=" ">
							<el-button type="primary" @click="handleSearch" class="sbtn">查询</el-button>
						</el-form-item>
					</div>
				</el-form>
			</el-collapse-item>
		</el-collapse>

		<div style="position: relative">
			<el-table :data="tableData" border stripe v-loading="loading" :height="tableH" ref="table" :row-class-name="getRowClass">
				<el-table-column type="expand">
				    <template slot-scope="scope">
						参数：{{scope.row.requestParam}}
					</template>
				</el-table-column>
				<el-table-column prop="operatorName" label="操作人" min-width="100"></el-table-column>
				<el-table-column prop="requestUri" label="请求地址" min-width="150"></el-table-column>
				<el-table-column prop="ip" label="ip" min-width="100"></el-table-column>
                <el-table-column prop="createTime" :formatter="dateFormat" label="请求时间" min-width="120"></el-table-column>
			</el-table>
		</div>

		<div style="position: absolute;right: 8px;margin: 5px 0 5px 0;">
			<el-pagination v-if="isMobile=='true'" :current-page="page" :page-size="size" :pager-count="2" :total="total" :page-sizes="[10,20,50,100]" @size-change="sizeChange" @current-change="handleCurrentChange" layout="total, prev, pager, next"></el-pagination>
			<el-pagination v-else :current-page="page" :page-size="size" :total="total" :page-sizes="[10,20,50,100]" @size-change="sizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
		</div>
	</div>
</body>
<script>
	$(window).resize(function() {
		app.tableH = $(window).height() - 108;
	});
	var app = new Vue({
		el: '#app',
		data: {
			isMobile: '${isMobile}',
            pickerTimeOptions: {
                shortcuts: [{
                    text: '昨天',
                    onClick(picker) {
                        const end = new Date(new Date().setHours(0, 0, 0, 0));
                        const start = new Date(new Date().setHours(0, 0, 0, 0));
                        start.setTime(start.getTime() - 3600 * 1000 * 24);
                        end.setTime(end.getTime());
                        picker.$emit('pick', [start, end]);
                    }
                },{
                    text: '今天',
                    onClick(picker) {
                        const end = new Date(new Date().setHours(0, 0, 0, 0));
                        const start = new Date(new Date().setHours(0, 0, 0, 0));
                        end.setTime(start.getTime() + 3600 * 1000 * 24);
                        picker.$emit('pick', [start, end]);
                    }
                },{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date(new Date().setHours(0, 0, 0, 0));
                        const start = new Date(new Date().setHours(0, 0, 0, 0));
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date(new Date().setHours(0, 0, 0, 0));
                        const start = new Date(new Date().setHours(0, 0, 0, 0));
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date(new Date().setHours(0, 0, 0, 0));
                        const start = new Date(new Date().setHours(0, 0, 0, 0));
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
			timeInterval : [],
			tableH: $(window).height() - 108,
			loading: false,
			page: 1,
			size: 10,
			total: 0,
			filters: {
                operatorName : "",
                requestUri : "",
                ip : "",
                startTime: null,
                endTime : null
			},
			tableData: []
		},
		created: function() {
			this.loadData();
		},
		methods: {
			loadData: function() {
				this.loading = true;
				var data = Object.assign({}, this.filters);
				data.page = this.page;
				data.size = this.size;
				$.ajax({
					url: "${ctx}/backstage/requestLog/query",
					data: data,
					dataType: 'json',
					success: function(returndata) {
						if(returndata.success) {
							app.total = returndata.data.count;
							app.tableData = returndata.data.list;
						} else {
							app.total = 0;
							app.tableData = [];
							app.$notify.error({
								title: '错误',
								message: returndata.errors.message
							});
						}
						app.loading = false;
					}
				});
			},
            searchTimeChange : function(){
                this.filters.startTime = this.timeInterval[0];
                this.filters.endTime = this.timeInterval[1];
            },
			handleSearch: function() {
				this.loadData();
			},
			sizeChange: function(val) {
				this.size = val;
				this.loadData();
			},
			handleCurrentChange: function(val) {
				this.page = val;
				this.loadData();
			},
            dateFormat: function(row, column) {
                var date = row[column.property];
                if(date == undefined) {
                    return "";
                }
                if(date.length < 10) {
                    var date = new Date(date * 1000); //如果date为10位不需要乘1000
                } else {
                    var date = new Date(date);
                }
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
                var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
                return Y + M + D + h + m + s;
            },
			getRowClass: function(row) {
				if (row.row.requestParam == undefined || row.row.requestParam.length == 0) {
					return 'row-expand-cover';
				}
			}
		}
	});
</script>